<template>
	<view class="topbar">
		<view class="topbar-text">
			<text class="text-left">{{msg}}</text>
			<view class="text-right">
				{{name}}
			</view>
		</view>
		<view class="search">
			<u-search placeholder="请输入商品名称" :show-action="false" class="topbar-search" :bg-color="bgcolor" :search-icon-color ="searchiconcolor" @focus="searchMall"></u-search>
		</view>
	</view>
</template>

<script>

	
	export default{
		data() {
			return {
				msg:"",
				bgcolor:"#F7F8FA",
				searchiconcolor:"#0c34ba"
			}	
			searchiconcolor:"#0c34ba"
		},
		props:{
			name:String
		},
		mounted(){
			let timer = new Date().getHours()
			if(timer>6 && timer<=12)this.msg = "早上好"
			else if(timer>12 && timer<=18)this.msg = "下午好"
			else if(timer>18 && timer<=24)this.msg = "晚上好"
			else if(timer>0 && timer<=6) this.msg = "深夜好"
		},
		methods:{
			searchMall(){
				uni.navigateTo({
					url:"../search/Search"
				})
			}
		}
	}
</script>

<style scoped>
	.topbar{
		height: 105rpx;
		display: flex;
		background-color: #FFFFFF;
		/* justify-content: space-between; */
		align-items: center;
		z-index: 1;
	}
	.topbar-text{
		display: flex;
		font-weight: 600;
		/* justify-content: space-between; */
		align-items: center;
		width: 40%;
	}
	.search{
		width: 60%;
	}
	.text-left{
		color: #73746d;
		width: 40%;
	}
	.text-right{
		width: 60%;
		color: #0c34ba;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		/* margin-right: 40rpx; */
	}
	.topbar-search{
		width: 100%;
		/* margin-left: 27rpx; */
	}
</style>
